<template>
  <page-layout :show-back="true">
	  <view class="container">
		
		<!-- 编辑内容区域 -->
		<scroll-view class="form-container" scroll-y="true">
			<!-- 头像编辑 -->
			<view class="form-item avatar-item">
				<text class="form-label">头像</text>
				<view class="avatar-container" @tap="chooseAvatar">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="edit-icon">
						<uni-icons type="camera" size="20" color="#ffffff"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 昵称编辑 -->
			<view class="form-item">
				<text class="form-label">昵称</text>
				<input class="form-input" type="text" v-model="userInfo.nickname" placeholder="请输入昵称" maxlength="16" />
			</view>
			
			<!-- 性别选择 -->
			<view class="form-item">
				<text class="form-label">性别</text>
				<picker class="form-picker" @change="handleGenderChange" :value="genderIndex" :range="genderOptions">
					<view class="picker-value">{{ genderOptions[genderIndex] }}</view>
				</picker>
			</view>
			
			<!-- 生日选择 -->
			<view class="form-item">
				<text class="form-label">生日</text>
				<picker class="form-picker" mode="date" @change="handleBirthdayChange" :value="userInfo.birthday" :start="startDate" :end="endDate">
					<view class="picker-value">{{ userInfo.birthday || '请选择生日' }}</view>
				</picker>
			</view>
			
			<!-- 地区选择 -->
			<view class="form-item">
				<text class="form-label">地区</text>
				<picker class="form-picker" mode="region" @change="handleRegionChange" :value="regionArray">
					<view class="picker-value">{{ regionText }}</view>
				</picker>
			</view>
			
			<!-- 个人简介 -->
			<view class="form-item textarea-item">
				<text class="form-label">个人简介</text>
				<textarea class="form-textarea" v-model="userInfo.introduction" placeholder="介绍一下自己吧" maxlength="100"></textarea>
				<text class="text-counter">{{ userInfo.introduction.length }}/100</text>
			</view>
		</scroll-view>
	</view>
  </page-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
import PageLayout from "../../components/PageLayout.vue";

// 用户信息
const userInfo = ref({
	avatar: '/static/avatar.jpg',
	nickname: '用户昵称',
	gender: 0, // 0-保密，1-男，2-女
	birthday: '',
	region: ['', '', ''],
	introduction: '这个人很懒，什么都没有留下'
});

// 性别选项
const genderOptions = ['保密', '男', '女'];
const genderIndex = computed(() => userInfo.value.gender);

// 地区显示文本
const regionArray = computed(() => userInfo.value.region);
const regionText = computed(() => {
	if (userInfo.value.region.every(item => !item)) {
		return '请选择地区';
	}
	return userInfo.value.region.join(' ');
});

// 日期范围
const startDate = '1950-01-01';
const endDate = new Date().toISOString().split('T')[0]; // 今天

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 保存资料
const saveProfile = () => {
	// 表单验证
	if (!userInfo.value.nickname.trim()) {
		uni.showToast({
			title: '昵称不能为空',
			icon: 'none'
		});
		return;
	}
	
	// 显示加载中
	uni.showLoading({
		title: '保存中...'
	});
	
	// 模拟保存操作
	setTimeout(() => {
		// 关闭加载提示
		uni.hideLoading();
		
		// 显示保存成功提示
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
		
		// 延迟返回上一页
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	}, 800);
};

// 选择头像
const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			userInfo.value.avatar = res.tempFilePaths[0];
		}
	});
};

// 性别选择变化
const handleGenderChange = (e) => {
	userInfo.value.gender = parseInt(e.detail.value);
};

// 生日选择变化
const handleBirthdayChange = (e) => {
	userInfo.value.birthday = e.detail.value;
};

// 地区选择变化
const handleRegionChange = (e) => {
	userInfo.value.region = e.detail.value;
};

// 页面加载时初始化数据
onMounted(() => {
	// 这里可以从服务器获取用户信息
	// 模拟异步加载数据
	setTimeout(() => {
		// 数据已预先初始化在 userInfo 中
	}, 500);
});
</script>

<style lang="scss">
page {
	background-color: #f5f7fa;
	height: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.save-btn {
	color: #6e8efb;
	font-size: 30rpx;
	font-weight: 500;
}

/* 表单容器 */
.form-container {
	margin-top: 90rpx;
	padding: 20rpx 0;
	flex: 1;
}

/* 表单项 */
.form-item {
	background: #fff;
	padding: 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f5f7fa;
}

.form-label {
	width: 160rpx;
	font-size: 28rpx;
	color: #333;
}

.form-input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
}

.form-picker {
	flex: 1;
}

.picker-value {
	font-size: 28rpx;
	color: #333;
}

/* 头像编辑 */
.avatar-item {
	align-items: flex-start;
}

.avatar-container {
	position: relative;
	width: 140rpx;
	height: 140rpx;
	margin-left: 20rpx;
}

.avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.edit-icon {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 50rpx;
	height: 50rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2rpx solid #fff;
}

/* 文本域编辑 */
.textarea-item {
	flex-direction: column;
	align-items: flex-start;
}

.form-textarea {
	width: 100%;
	height: 200rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
	line-height: 1.5;
}

.text-counter {
	align-self: flex-end;
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}
</style> 